<!-- 示例 -->
<template>
  <p
    v-if="blockData.exampleData?.dataId"
    :class="className"
    :[dataNumber]="contentNumber"
    :data-type="blockData.dataType"
    :data-id="blockData.exampleData?.dataId"
    :data-block-id="blockData.blockId"
    :data-share-id="shareId"
    :data-lang="language"
    :[dataRestart]="blockData.exampleData?.isResetNumber ? '1' : null"
  >
    <template v-for="(i, idx) of contentList">
      <template v-if="i.contentType === 'text'">{{ i.content }}</template>
      <sup v-else-if="i.contentType === 'sup'" :key="`sup`+idx" data-type="sup">{{ i.content }}</sup>
      <sub v-else-if="i.contentType === 'sub'" :key="`sub`+idx" data-type="sub">{{ i.content }}</sub>
    </template>
  </p>
</template>
<script>
export default {
  props: {
    dataId: { type: String, default: '' },
    blockData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      dataRestart: 'data-restart',
      dataNumber: 'data-number'
    }
  },
  computed: {
    className() {
      const { dataType } = this.blockData
      const lang = this.language
      return dataType + ' ' + lang
    },
    dataType() {
      return this.blockData?.dataType || 'example'
    },
    contentList() {
      let contentList = this.blockData.exampleData?.textData?.contentList
      if (!contentList?.length) return []
      const [_, ...list] = contentList
      return list
    },
    contentNumber() {
      return this.blockData.exampleData?.contentNumber || ''
    },
    shareId() {
      const noteAttr = this.blockData.exampleData?.textData?.contentList[0]
      return noteAttr?.shareId
    },
    language() {
      return this.blockData.exampleData?.dataLang || 'zh'
    }
  }
}
</script>
<style></style>
